import Dragable from "./main"

/**
 * Dragable 組件使用示例
 */
const DragableExample = () => {
    return (
        <div style={{ position: "relative", height: "100vh", width: "100%" }}>
            {/* 基本使用 */}
            <Dragable initialPosition={{ x: 20, y: 20 }}>
                <div style={{ padding: "20rem", width: "150rem" }}>
                    <h3>基本拖拽元素</h3>
                    <p>我可以被拖拽!</p>
                </div>
            </Dragable>

            {/* 自定義樣式 */}
            <Dragable
                initialPosition={{ x: 20, y: 200 }}
                backgroundColor="#f5f5f5"
                borderColor="#3366ff"
                borderWidth="2rem"
                borderRadius="12rem"
                boxShadow="0 4rem 16rem rgba(51, 102, 255, 0.2)"
                maxWidth="300rem"
                onDragStart={() => console.log("開始拖拽")}
                onDragEnd={(position) => console.log("拖拽結束", position)}
            >
                <div style={{ padding: "20rem", width: "250rem" }}>
                    <h3>自定義樣式</h3>
                    <p>使用自定義顏色和樣式的拖拽元素</p>
                    <button>點擊我</button>
                </div>
            </Dragable>

            {/* 作為浮動工具 */}
            <Dragable
                initialPosition={{ x: 250, y: 20 }}
                backgroundColor="linear-gradient(to right, #00b8f5, #3366ff)"
                borderRadius="50%"
                style={{ padding: "15rem" }}
                zIndex="20"
            >
                <div
                    style={{
                        width: "60rem",
                        height: "60rem",
                        borderRadius: "50%",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        color: "white",
                        fontWeight: "bold",
                        cursor: "pointer",
                    }}
                >
                    +
                </div>
            </Dragable>
        </div>
    )
}

export default DragableExample
